<template>
    <div class="indateInput-box">
        <el-select v-model="indateYMD.year" placeholder="Select" size="small">
            <el-option
                v-for="(item,i) in yearArr"
                :key="i+'yearArr'"
                :label="item.label"
                :value="item.value"
            />
        </el-select>

        <el-select v-model="indateYMD.month" placeholder="Select" size="small">
            <el-option
                v-for="(item,i) in monthArr"
                :key="i+'monthArr'"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
    </div>
</template>

<script setup>
    import { ref, reactive,watch,defineEmits} from 'vue'


    let yearArr = reactive([
        {value: 0, label: '0年'},
        {value: 1, label: '1年'},
        {value: 2, label: '2年'},
        {value: 3, label: '3年'},
        {value: 4, label: '4年'},
        {value: 5, label: '5年'},
        {value: 6, label: '6年'},
        {value: 7, label: '7年'},
        {value: 8, label: '8年'},
        {value: 9, label: '9年'},
        {value: 10, label: '10年'},
        {value: 11, label: '11年'},
        {value: 12, label: '12年'},
        {value: 13, label: '13年'},
        {value: 14, label: '14年'},
        {value: 15, label: '15年'},
        {value: 16, label: '16年'},
        {value: 17, label: '17年'},
        {value: 18, label: '18年'},
        {value: 19, label: '19年'},
    ]);
    let monthArr = reactive([
        {value: 0, label: '0月'},
        {value: 1, label: '1月'},
        {value: 2, label: '2月'},
        {value: 3, label: '3月'},
        {value: 4, label: '4月'},
        {value: 5, label: '5月'},
        {value: 6, label: '6月'},
        {value: 7, label: '7月'},
        {value: 8, label: '8月'},
        {value: 9, label: '9月'},
        {value: 10, label: '10月'},
        {value: 11, label: '11月'},
    ]);

    const props = defineProps({
        modelValue:{
            type:Number,
            default:0
        },
    });
    const emit = defineEmits(['update:modelValue']);

    let indateYMD = reactive({
        year:0,
        month:0,
    });

    let indateMs = ref(props.modelValue);
    // indateYMD.year = Math.floor(indateMs.value/31536000000);
    // indateYMD.month = Math.floor(indateMs.value%2592000000);
    // console.log(indateMs.value);
    //一年是31536000000mm一个月是2592000000mm
    watch(indateYMD,(newValue)=>{
        let indateMs = newValue.year*31536000000 + newValue.month*2592000000;
        emit('update:modelValue', indateMs);
    },{deep:true});
    watch(indateMs,(newValue)=>{
        indateYMD.year = Math.floor(newValue/31536000000);
        indateYMD.month = Math.floor((newValue%31536000000)/2592000000);
    },{immediate:true});

</script>

<style scoped lang="scss">
.indateInput-box{
    display: inline-block;
    //display: flex;
    .el-select{
        width: 70px;
        margin-right: 10px;
    }
}
</style>
